<template>
  <div class="ol">
    <!-- ol-list -->
    <div class="ol-list ol-audit-list">
      <div class="ol-item " :class="{check : item.select}" v-for="(item,index) in decomposeData" :key="index" @click="choose(index)">
        <div class="info">
          <div class="title">{{item.plate_name}}</div>
        </div>
        <div class="more-info">
          <div class="desc">{{item.system_name}}</div>
        </div>
        <div class="select-box">
          <div class="select-check">
              <span v-if="item.select" class="font_family icon-quanxuan_selected"></span>
              <span v-else class="font_family icon-quanxuan_normal"></span>
              <span class="text">系统负责人：{{item.leader}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="form-btn">
      <div @click="cancle" class="btn btn-color1">取消</div>
      <div @click="save" class="btn btn-color3">保存</div>
    </div>
    <goback></goback>
  </div>
</template>
<script>
import { demandLeaderList, demandLeader } from "@/api/service.js";
import { Toast } from "vant";
import Goback from '@/components/goback.vue';
export default {
  components:{
    Goback
  },
  name: "Ol",
  data() {
    return {
      // type: 'base',
      searchValue: "",
      id: "",
      decomposeData: "",
    };
  },
  watch: {
    id() {
      demandLeaderList({
        server_id:this.id
      })
      .then((res)=>{
        console.log(res)
        if(res.status == 'success'){
          for(var i=0;i<res.data.length;i++){
            res.data[i].select = false
          }
          this.decomposeData = res.data
        }
      })
      
    },
  },
  mounted() {
    this.id = this.$route.query.id;
  },
  computed: {
    isClear() {
      if (this.searchValue != "") {
        return true;
      } else {
        return false;
      }
    },
  },
  methods: {
    choose(index) {
      for (var i = 0; i < this.decomposeData.length; i++) {
        this.decomposeData[i].select = false;
      }
      this.decomposeData[index].select = true;
    },
    //取消
    cancle() {
      this.$router.back();
    },
    //保存
    save() {
      let id;
      for (var i = 0; i < this.decomposeData.length; i++) {
        if (this.decomposeData[i].select) {
          id = this.decomposeData[i].id;
        }
      }
      demandLeader({
        task_id: id,
        server_id:this.id
      }).then((res) => {
        console.log(res);
        Toast(res.message)
      });
      // localStorage.setItem("demandId", id);
      this.$router.back();
    },
  },
};
</script>
<style lang="less" scoped>
.ol {
  background: #f7f9f9;
  min-height: calc(100vh - (60px + env(safe-area-inset-bottom)));
  padding-bottom: calc(60px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}
// ol-list
.ol-list {
  padding-top: 10px;
  .ol-item {
    height: 78px;
    background: #fff;
    padding: 0 15px;
    margin: 0 15px 9px;
    border-radius: 7px;
    &.check {
      border: 1px solid #43966a;
    }
    // select-box
    .select-box {
      display: flex;
      height: 30px;
      line-height: 30px;
      justify-content: space-between;
      border-top: 1px solid #f2f2f2;
      .select-check {
        .icon-quanxuan_normal {
          font-size: 13px;
          color: #8f92a0;
        }
        .icon-quanxuan_selected {
          font-size: 13px;
          color: #009966;
        }
        .text {
          display: inline-block;
          margin-left: 3px;
          font-size: 12px;
          color: #313541;
        }
      }
      .status {
        font-size: 12px;
        color: #0041c4;
      }
    }
    .info {
      display: flex;
      padding-top: 14px;
      height: 22px;
      .title {
        flex: 1;
        height: 22px;
        font-size: 16px;
        font-weight: bold;
        line-height: 22px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .time {
        width: 80px;
        height: 22px;
        line-height: 22px;
        color: #939dad;
        font-size: 12px;
        text-align: right;
      }
    }
    .more-info {
      display: flex;
      margin-top: 6px;
      height: 35px;
      .desc {
        flex: 1;
        font-size: 12px;
        height: 17px;
        line-height: 17px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .hour {
        width: 50px;
        height: 17px;
        line-height: 17px;
        font-size: 17px;
        font-weight: bold;
        color: #009966;
        text-align: right;
      }
    }
  }
  &.ol-audit-list {
    .ol-item {
      height: 108px;
    }
  }
}
.form-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: #fff;
  height: 34px;
  padding: 13px 15px;
  padding-bottom: calc(13px + env(safe-area-inset-bottom));
  .btn {
    flex: 1;
    height: 34px;
    line-height: 34px;
    text-align: center;
    font-size: 14px;
    margin-right: 6px;
    border-radius: 5px;
    &:last-child {
      margin-right: 0;
    }
  }
  .btn-color1 {
    background: #ebedf0;
    color: #011445;
  }
  .btn-color3 {
    background: #009966;
    color: #fff;
  }
}
</style>